<template>
  <div class="to-top-wrap" v-show="isShowTop" @click="toTop">
    <van-icon name="arrow-up" color="#fff"/>
  </div>
</template>

<script lang="ts">
  import {Component, Vue, Prop} from "vue-property-decorator";
  import {Icon} from "vant";

  @Component({
    components: {
      [Icon.name]: Icon,
    }
  })
  export default class LoadingCom extends Vue {
    @Prop({default: false})
    private isShowTop: boolean = false;

    toTop() {
      if (document.documentElement && document.documentElement.scrollTop) {
        document.documentElement.scrollTop = 0;
      } else if (document.body) {
        document.body.scrollTop = 0;
      }
    }

  }
</script>
<style>
  .to-top-wrap {
    width: 40px;
    height: 40px;
    line-height: 42px;
    background: dodgerblue;
    border-radius: 50%;
    position: fixed;
    right: 10px;
    bottom: 80px;
    text-align: center;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .2);
  }
</style>
